<template>
	<view class="question">
		<view class="nav clearfix">
			<view :class="[activeIndex==1?'active':'']" @click="qiehuan(1)">
				<view class="title">计费问题</view>
				<view class="dingwei"></view>
			</view>
			<view :class="[activeIndex==2?'active':'']" @click="qiehuan(2)">
				<view class="title">租借问题</view>
				<view class="dingwei"></view>
			</view>
			<view class="kefu" @click="call">
				<image :src="baseUrl + '/wximage/qusetion_kefu.png'"></image>
				<view class="name">联系客服</view>
			</view>
		</view>
		<view class="content" v-if="activeIndex == 1">
			<view class="list clearfix" v-for="(item,index) in jfList" :key="index" @click="topage('/pages/lease/article_detail?id=' + item.id)">
				<view class="name fl">{{item.title}}</view>
				<image :src="baseUrl + '/wximage/question_right.png'" class="image fr"></image>
			</view>
		</view>
		<view class="content" v-if="activeIndex == 2">
			<view class="list clearfix" v-for="(item,index) in zjList" :key="index" @click="topage('/pages/lease/article_detail?id=' + item.id)">
				<view class="name fl">{{item.title}}</view>
				<image :src="baseUrl + '/wximage/question_right.png'" class="image fr"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				baseUrl: getApp().globalData.baseUrl,
				activeIndex: 1,
				x_tell: '',
				jfList: [],
				zjList: [],
			}
		},
		onLoad() {
			//获取基本配置信息
			this.request({
				url: '/xcx/webconfig',
				data: {}
			}).then(res => {
				if (res.data.code == 200) {
					this.x_tell = res.data.data.x_tell;
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
			
			//计费问题
			this.request({
				url: '/xcx/article',
				data: {
					category_id: 24,
				}
			}).then(res => {
				if (res.data.code == 200) {
					this.jfList = res.data.data
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
			
			//计费问题
			this.request({
				url: '/xcx/article',
				data: {
					category_id: 25,
				}
			}).then(res => {
				if (res.data.code == 200) {
					this.zjList = res.data.data
				} else {
					uni.showToast({
						title: '请求失败，请稍后再试',
						icon: 'none'
					})
				}
			})
		},
		methods:{
			qiehuan(index){
				this.activeIndex = index;
			},
			call() {
				let tell = this.x_tell;
				uni.makePhoneCall({
					phoneNumber: tell,
					success(res) {
			
					},
					fail(res) {
			
					}
				})
			},
			topage(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #F8F8F8;
	}
	
	.question{
		width: 100%;
		margin: 0 auto;
		
		.nav{
			width: 100%;
			height: 84rpx;
			line-height: 84rpx;
			padding: 0 40rpx;
			box-sizing: border-box;
			position: relative;
			
			>view{
				display: inline-block;
				
				.title{
					font-size: 24rpx;
					color: #333333;
					margin-right: 32rpx;
				}
			}
			
			.active{
				position: relative;
				
				.title{
					font-size: 32rpx;
					font-weight: 700;
				}
				
				.dingwei{
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background: linear-gradient(to bottom, #10DAC5, #59FFF6);
					position: absolute;
					top: 12rpx;
					right: 22rpx;
				}
			}
			
			.kefu{
				position: absolute;
				right: 40rpx;
				top: 0;
				height: 84rpx;
				line-height: 84rpx;
				
				image{
					width: 40rpx;
					height: 40rpx;
					float: left;
					margin-right: 4rpx;
					margin-top: 22rpx;
				}
				
				.name{
					font-size: 24rpx;
					color: #39EFE1;
					float: left;
				}
			}
		}
		
		.content{
			width: 100%;
			padding: 0 40rpx;
			box-sizing: border-box;
			margin-top: 32rpx;
			
			.list{
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				
				.name{
					font-size: 24rpx;
					color: #333333;
				}
				
				.image{
					width: 28rpx;
					height: 28rpx;
					margin-top: 20rpx;
				}
			}
			
			.list:first-child{
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}
			
			.list:nth-of-type(2n+1){
				background: #F2FFFE;
			}
			
			.list:nth-of-type(2n){
				background: #FFFFFF;
			}
			
			.list:last-child{
				border-bottom-left-radius: 10rpx;
				border-bottom-right-radius: 10rpx;
			}
		}
	}
</style>